<template>
  <div class="box">
    <div>
      <div class="netoplist">
        <div>
          <span class="sfmdclass">随访目的</span>
          <el-radio-group v-model="Settimeadd.followUpPurpose">
            <el-radio v-for="option in sfmdlist" :key="option.dictValue" :value="option.dictValue" size="large">
              {{ option.dictLabel }}
            </el-radio>
          </el-radio-group>
        </div>

        <div>
          <span class="sfmdclass">随访日期</span>
          <el-date-picker
            v-model="Settimeadd.followUpDate"
            value-format="YYYY-MM-DD"
            type="date"
            style="width: 240px"
            :disabled="true"
          />
        </div>

        <div class="topboxone">
          <el-button type="primary" @click="addbutton">自定义随访</el-button>
        </div>
      </div>
      <div class="shurubox">
        <div class="bottominput">
          <div class="lefttopbox">
            <div class="namezm">S</div>
            <el-input
              v-model="Settimeadd.patientComplaint"
              type="textarea"
              placeholder="患者主诉"
              :rows="7"
              style="width: 100%"
            />
          </div>
          <div class="righttopbox">
            <div class="namezm">P</div>
            <el-input v-model="Settimeadd.solution" type="textarea" placeholder="解决方案" :rows="7" style="width: 100%" />
          </div>
        </div>
      </div>
      <div class="setbutton">
        <el-button type="primary" @click="sssfbutton">保存</el-button>
      </div>
    </div>
    <div>
      <el-table :data="datalist" border style="width: 100%" max-height="300" @selection-change="handleSelectionChange">
        <el-table-column type="expand">
          <template #default="props">
            <div m="4">
              <p m="t-0 b-2">患者主诉: {{ props.row.patientComplaint }}</p>
              <p m="t-0 b-2">解决方案: {{ props.row.solution }}</p>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="followUpPurposeName" label="随访目的" />
        <el-table-column prop="followUpDate" label="随访日期" />
        <el-table-column prop="reservationDate" label="预约日期" />
        <el-table-column prop="followUpStatusName" label="随访状态" />
        <el-table-column prop="createBy" label="随访人" />
        <el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip />
        <el-table-column label="操作">
          <template #default="scope">
            <span class="anbutton scbutton" @click="deletebutton(scope.row.id)">删除</span>
            <span class="anbutton" @click="xgbutton(scope.row.id)" v-if="scope.row.followUpStatusName == '待随访'">修改</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="dialogVisible" title="自定义随访" width="700" :before-close="handleClose">
      <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef">
        <el-form-item label="随访目的" prop="followUpPurpose">
          <el-radio-group v-model="form.followUpPurpose">
            <el-radio v-for="option in sfmdlist" :key="option.dictValue" :value="option.dictValue" size="large">
              {{ option.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="预约日期">
          <el-date-picker v-model="form.reservationDate" value-format="YYYY-MM-DD" type="date" style="width: 240px" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
        <el-form-item>
          <div class="savrnutton">
            <el-button type="primary" @click="savebutton(ruleFormRef)">保存</el-button>
            <el-button @click="clearbutton(ruleFormRef)">清空</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog v-model="dialogVisibletwo" title="患者随访" width="600" :before-close="handleClosetwo">
      <el-form :model="formxg" label-width="auto" style="max-width: 600px" ref="ruleFormRef">
        <el-form-item label="随访方式" prop="followUpMethod">
          <el-select v-model="formxg.followUpMethod">
            <el-option v-for="item in ssfslist" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="随访目的" prop="followUpPurpose">
          <el-radio-group v-model="formxg.followUpPurpose">
            <el-radio v-for="option in sfmdlist" :key="option.dictValue" :value="option.dictValue" size="large">
              {{ option.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="患者主诉">
          <el-input v-model="formxg.patientComplaint"></el-input>
        </el-form-item>
        <el-form-item label="解决方案">
          <el-input v-model="formxg.solution"></el-input>
        </el-form-item>
        <el-form-item label="预约日期">
          <el-date-picker v-model="formxg.reservationDate" value-format="YYYY-MM-DD" type="date" style="width: 240px" />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="formxg.remark" type="textarea" />
        </el-form-item>

        <el-form-item>
          <div class="savrnutton">
            <el-button type="primary" @click="savebuttonbc(ruleFormRef)">保存</el-button>
            <el-button @click="clearbuttonxg(ruleFormRef)">清空</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { addsfAPI, updatesfAPI, getsflisttwoApi, deltesfApi, addsftwoAPI, sfgetInfoApi } from "@/api/hzmange/index.js";
import { getCurrentDateFormatted } from "@/utils/index";
const route = useRoute();
const routedata = reactive(route.query);
const YZlist = JSON.parse(sessionStorage.getItem("YZlist"));
const parentlist = JSON.parse(sessionStorage.getItem("patientInfo"));
let ssfslist = ref([]); //随访方式
let sfmdlist = ref([]); //随访目的
let sfstatus = ref([]); //随访状态
sfmdlist.value = YZlist.follow_up_purpose;
ssfslist.value = YZlist.follow_up_method;
sfstatus.value = YZlist.follow_up_status;
let Settimeadd = ref({
  followUpDate: getCurrentDateFormatted(),
  patientComplaint: "",
  solution: ""
});
let datalist = ref([]);
let dialogVisibletwo = ref(false);
let dialogVisible = ref(false);
const ruleFormRef = ref(null);
const size = ref("default");
var pagetotal = ref(0);
let formxg = ref({});
let handleSizeChange = () => {
  getlist();
};
let handleCurrentChange = () => {
  getlist();
};
//获取字典列表
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  patientName: routedata.name
});
const form = ref({
  patientName: "", //患者姓名
  patientId: "", //患者ID
  followUpMethod: "", //随访方式
  followUpPurpose: "", //随访目的
  followUpStatus: "1", //随访状态
  followUpDate: "", //随访日期
  patientComplaint: "", //患者主诉
  solution: "", //解决方案
  reservationDate: "2025-05-23", //预约日期
  followUpBy: JSON.parse(sessionStorage.getItem("useInfo")).userName, //随访人
  remark: ""
});
const onSubmit = formEl => {
  dialogVisible.value = false;
};
const clearbutton = formEl => {
  form.value = {
    followUpPurpose: "",
    reservationDate: "",
    remark: ""
  };
};
getCurrentDate();
function getCurrentDate() {
  const now = new Date();

  const year = now.getFullYear();
  // 因为getMonth()返回的月份是从0开始计数的，所以需要加1
  const month = now.getMonth() + 1;
  const day = now.getDate();

  // 将日期格式化为 "YYYY-M-D"
  form.value.Datevalue = `${year}-${month}-${day}`;
}
const handleClose = () => {
  dialogVisible.value = false;
};
const handleClosetwo = () => {
  dialogVisibletwo.value = false;
};
let addbutton = () => {
  form.value = {};
  xgstatus.value = false;
  dialogVisible.value = true;
};
const seebutton = e => {
  dialogVisible.value = true;
};
let xgstatus = ref(false);
function savebutton(formEl) {
  addsftwoAPI({
    patientName: parentlist.name, //患者姓名
    patientId: parentlist.id, //患者ID
    followUpPurpose: form.value.followUpPurpose, //随访目的
    reservationDate: form.value.reservationDate, //预约日期
    remark: form.value.remark //备注
  }).then(() => {
    ElMessage({
      message: "新增成功",
      type: "success"
    });
    formEl.resetFields();
    dialogVisible.value = false;
    getlist();
  });
}
getlist();
function getlist() {
  getsflisttwoApi({
    patientId: parentlist.id //患者ID
  }).then(res => {
    // pagetotal.value = res.data;
    datalist.value = res.data;
  });
}
let selection = ref([]);
const handleSelectionChange = e => {
  selection.value = e;
};
const deletebutton = e => {
  ElMessageBox.confirm("确定删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deltesfApi({
      id: e
    }).then(res => {
      ElMessage({
        type: "success",
        message: `${res.msg}`
      });
      getlist();
    });
  });
};
const xgbutton = e => {
  sfgetInfoApi({
    id: e
  }).then(res => {
    dialogVisibletwo.value = true;
    formxg.value = res.data;
  });

  // xgstatus.value = true;
  // dialogVisible.value = true;
  // form.value = e;
};

async function sssfbutton() {
  if (Settimeadd.value.patientComplaint == "" || Settimeadd.value.solution == "") {
    ElMessage({
      message: "患者主诉和解决方案不能为空",
      type: "warning"
    });
    return;
  } else {
    let res = await addsfAPI({
      patientName: parentlist.name, //患者姓名
      patientId: parentlist.id, //患者ID
      followUpPurpose: Settimeadd.value.followUpPurpose, //随访目的
      followUpDate: Settimeadd.value.followUpDate, //随访日期
      patientComplaint: Settimeadd.value.patientComplaint, //患者主诉
      solution: Settimeadd.value.solution //解决方案
    });
    if (res.code == 200) {
      ElMessage({
        message: "保存成功",
        type: "success"
      });
      Settimeadd.value.patientComplaint = "";
      Settimeadd.value.solution = "";
      getlist();
    }
  }
}
function savebuttonbc() {
  updatesfAPI(formxg.value).then(() => {
    ElMessage({
      message: "修改成功",
      type: "success"
    });

    dialogVisibletwo.value = false;
    formxg.value = {};

    getlist();
  });
}
function clearbuttonxg() {
  formxg.value = {};
}
</script>
<style scoped>
.box {
  color: #606266;
}
.topbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.savrnutton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.topboxone {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.fybox {
  display: flex;
  justify-content: end;
}
.sfmdclass {
  margin-right: 20px;
}
.netoplist {
  display: flex;
  justify-content: space-between;
}
.shurubox {
  width: 100%;
}
.bottominput {
  display: flex;
  width: 95%;
}
.lefttopbox {
  width: 50%;
  margin-right: 10px;
}
.righttopbox {
  width: 50%;
}
.setbutton {
  float: right;
  margin: 10px;
}
.namezm {
  font-weight: bold;
  color: #009688;
  font-size: 16px;
}
.anbutton {
  cursor: pointer;
  color: #009688;
}
.scbutton {
  margin-right: 5px;
}
</style>
